<template>
  <div class="login-box" id="rrapp" v-cloak>
    <div class="login-logo">
      <b>容灾管理平台</b>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      <p class="login-box-msg">用户登录</p>
      <div v-if="error" class="alert alert-danger alert-dismissible">
        <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" v-model="user.username" placeholder="账号">
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" class="form-control" v-model="user.password" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="text" class="form-control" v-model="user.captcha" @keyup.enter="login" placeholder="验证码">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <img alt="如果看不清楚，请单击图片刷新！" class="pointer" :src="src" @click="refreshCode">
        &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" @click="refreshCode">点击刷新</a>
      </div>
      <div class="checkbox text-left">
        <label><input type="checkbox" v-model="user.rememberMe" value="true">记住我</label>
      </div>

      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="button" class="btn btn-primary btn-block btn-flat" @click="login">登录</button>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.social-auth-links -->

    </div>
    <!-- /.login-box-body -->
  </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
          return {user:{},
            error: false,
            errorMsg: '',
            src: this.$api+'/captcha.jpg'}
        },
      methods: {
        refreshCode: function () {
          this.src = this.$api+"/captcha.jpg?t=" + $.now();
        },
        login: function (event) {
           this.$axios({
             url: this.$api+"/sys/login",
             data:this.user,
             method:"post"
           }).
           then((r)=>{
             console.log(r.data.code);
              if(r.data.code == 0){
                console.log('登录成功');
                 // this.$router.push("/index");
              }else{
                this.error = true;
                this.errorMsg = result.msg;
                this.src = this.$api+"/captcha.jpg?t=" + $.now();
              }
           });
        }
      }
    }
</script>

<style scoped>

</style>
